<template>
  <div class="banxin">
    <div class="breadbar">
        首页/全部商品
    </div>
    <div class="add">
        <img src="@/assets/images/home/ad.png" alt="">
    </div>
    <div class="navbar">
        <ul>
            排序：
            <li :class="{on:sort==1}" @click="doSort(1)">全部</li>
            <li :class="{on:sort==2}" @click="doSort(2)">我能兑换的</li>
            <li :class="{on:sort==3}" @click="doSort(3)">0-500分</li>
            <li :class="{on:sort==4}" @click="doSort(4)">500-1000分</li>
            <li :class="{on:sort==5}" @click="doSort(5)">1000-1500分</li>
            <li :class="{on:sort==6}" @click="doSort(6)">1500-2500分</li>
        </ul>
        <ul>
            分类：
            <li :class="{on:ty==1}" @click="doTy(1)">全部</li>
            <li :class="{on:ty==2}" @click="doTy(2)">商品兑换</li>
            <li :class="{on:ty==3}" @click="doTy(3)">虚拟商品</li>
        </ul>
    </div>
    <ul >
        <LoadMore :bigarr="products" :size="8" class="list">
            <template slot-scope="scope">
                <li v-for="item,index in scope.smallarr">
                    <img :src="'http://sc.wolfcode.cn'+item.coverImg" alt="" class="image">
                    <div class="price">
                        <h4>{{ item.name }}</h4>
                        <p>{{item.coin}}积分</p>
                        <button @click="conversion(item.id)">立即兑换</button>
                    </div>
                    <img src="@/assets/images/home/hot-j.png" alt="" class="hot" v-if="item.isHotSale==1">
                    <img src="@/assets/images/home/new-j.png" alt="" class="hot" v-else-if="item.isLatest==1">
                </li>
            </template>
            
        </LoadMore>
    </ul>
  </div>
</template>

<script>
export default {
    data(){
        return {
            products:[],
            did:0,//1->精品推荐 2-> 热门兑换 0->全部
            type:0,//1->实体商品 2->虚拟商品 0->全部
            min:0,//最少积分
            max:10000,//为0返回所有
            keyword:"",

            //其他变量
            sort:1,
            ty:1,
        }
    },
    created(){
        if(this.$route.query.keyword){
            this.request({keyword:this.$route.query.keyword})
        }else{
            this.request({max:0});
        }
        
    },
    methods:{
        search(){
           
        },
        request(params){
            this.$ajax.get("products",{params}).then(res=>{
                if(res.code===0){
                    this.products = res.data;
                }
            })
        },
        conversion(id){
            this.$router.push({name:"detail",params:{id}})
        },
        doSort(i){
            if(this.sort==i) return;
            this.sort = i;
            switch(i){
                case 1:
                    this.request({max:0,type:this.type});
                    break;
                case 2:
                    let coin = this.$store.state.user.coin ||0;
                    if(coin==0){
                        this.products = [];
                        return;
                     }
                     this.max = coin;
                    this.request({max:coin,type:this.type});
                    break;
                case 3:
                    this.max = 500
                    this.request({max:500,type:this.type});
                    break;
                case 4:
                    this.min = 500;
                    this.max = 1000;
                    this.request({min:500,max:1000,type:this.type});
                    break;
                case 5:
                    this.max = 1500;
                    this.min = 1000;
                    this.request({min:1000,max:1500,type:this.type});
                    break;
                case 6:
                    this.max=2500;
                    this.min = 1500;
                    this.request({min:1500,max:2500,type:this.type});
                    break;
            }
        },
        doTy(i){
            if(this.ty==i) return;
            this.ty = i; 
            let max = this.max;
            let min = this.min;
            switch(i){
                case 1:
                    this.type = 0;
                    this.request({type:0,max,min});
                    break;
                case 2:
                    this.type = 1;
                    this.request({type:1,max,min});
                    break;
                case 3:
                    this.type = 2;
                    this.request({type:2,max,min});
                    break;
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/base.less";
    .breadbar{
        font-size: 16px;
        color: #666;
        padding: 30px 0;
        text-align: left;
    }
    .add{
        width: 100%;
        margin: 10px 0;
        background-color: #FFB089;
        height: 180px;
    }
    .navbar{
        display: flex;
        flex-direction: column;
        ul{
            width: 100%;
            color: #333333;
            font-size: 16px;
            display: flex;
            justify-content: flex-start;
            padding: 10px 0;
            li{
                color: #999999;
                padding: 0 5px;
                cursor: pointer;
            }
            .on{
                color: #00329B;
                font-weight: bold;
            }
        }
    }
    .list{
            list-style: none;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 285px;
                height: 412px;
                background-color: #fff;
                position: relative;
                margin:20px 0;
                transition: 0.5s;
                &:hover{
                    transform: translateY(-20px);
                    .price button{
                        background-color: #0A328E;
                        color:#fff;
                    }
                }
                .image{
                    width: 100%;
                    height: 250px;
                    display: block;
                    border: none;
                }
                .price{
                    width: 100%;
                    height: 162px;
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                    h4{
                        color:#333;
                        font-size: 18px;
                        height: 18px;
                    }
                    p{
                        color: #FD604D;
                        height: 18px;
                    }
                    button{
                        color: #0A328E;
                        border: 1px solid #0A328E;
                        width: 100px;
                        height: 36px;
                        display: block;
                        background-color: #fff;
                        cursor: pointer;
                    }
                    
                }
                .hot{
                    width: 58px;
                    height: 58px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
        }
</style>